<template>
    <lightning-card title="StylingHooks" icon-name="custom:custom3">
        <div class="slds-var-m-around_medium">
            <lightning-input
                type="toggle"
                label="Some toggle control"
                variant="label-hidden"
                message-toggle-active=""
                message-toggle-inactive=""
                checked
                class="slds-var-m-bottom_medium"
            ></lightning-input>

            <lightning-input
                type="toggle"
                label="Another toggle control"
                variant="label-hidden"
                message-toggle-active=""
                message-toggle-inactive=""
                checked
                class="slds-var-m-bottom_medium toggle-red"
            ></lightning-input>

            <lightning-button label="A button"></lightning-button>
        </div>

        <c-view-source source="lwc/stylingHooks" slot="footer">
            Use Styling Hooks to customize the appearance of Lightning base
            components and custom components.
        </c-view-source>
    </lightning-card>
</template>
